<template>
  <div :style="{ ...coreStyle.marginSame(8) }">
    <a-card>
      <a-form ref="dbTableFieldFormQueryRef" :model="dbTableFieldFormQueryModel" labelAlign="left" layout="vertical" :style="{ ...coreStyle.marginBottom(10) }">
        <a-row :gutter="16" v-show="!dbTableFieldFormQueryVisible">
          <a-col :span="8">
            <a-form-item :style="{ ...coreStyle.marginBottom(-8) }">
              <a-input-search v-model:value="dbTableFieldFormQueryModel.keySearchVo" placeholder="关键字搜索" :disabled="dbTableFieldFormQuerySubmitting" @search="dbTableFieldFormQuerySearch" />
            </a-form-item>
          </a-col>
          <a-col :span="16">
            <a-button type="link" :style="{ ...coreStyle.floatRight }" @click="dbTableFieldFormQueryUpDown">
              展开
              <CoreIcon icon="akar-icons:chevron-down" :size="14" />
            </a-button>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-show="dbTableFieldFormQueryVisible">
          <a-col :span="8">
            <a-form-item>
              <a-input-search v-model:value="dbTableFieldFormQueryModel.keySearchVo" placeholder="关键字搜索" :disabled="dbTableFieldFormQuerySubmitting" @search="dbTableFieldFormQuerySearch" />
            </a-form-item>
          </a-col>
          <a-col :span="16">
          </a-col>
          <a-col :span="8">
            <a-form-item label="字段名称">
              <a-input v-model:value="dbTableFieldFormQueryModel.fieldNameAndLike" placeholder="输入字段名称" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="数据类型">
              <a-input v-model:value="dbTableFieldFormQueryModel.dataTypeAndLike" placeholder="输入数据类型" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="是否为空">
              <a-input v-model:value="dbTableFieldFormQueryModel.isemptyAndLike" placeholder="输入是否为空" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="排序权重">
              <a-input-number v-model:value="dbTableFieldFormQueryModel.weightOrder" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="外键Id">
              <a-input v-model:value="dbTableFieldFormQueryModel.fkidAndLike" placeholder="输入外键Id" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-space :style="{ ...coreStyle.floatRight }">
              <a-button @click="dbTableFieldFormQueryReset">
                <CoreIcon icon="ant-design:clear-outlined" :size="14" />
                重置
              </a-button>
              <a-button type="primary" ghost :loading="dbTableFieldFormQuerySubmitting" @click="dbTableFieldFormQuerySearch">
                <CoreIcon icon="ant-design:search-outlined" :size="14" />
                查询
              </a-button>
              <a-button type="link" @click="dbTableFieldFormQueryUpDown">
                收起
                <CoreIcon icon="akar-icons:chevron-up" :size="14" />
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <a-space>
        <a-button type="primary" ghost @click="dbTableFieldAdd">
          <CoreIcon icon="carbon:add-alt" :size="14" />
          新增
        </a-button>
        <a-button type="dashed" @click="dbTableFieldUpdate" v-if="dbTableFieldListSelectLength === 1">
          <CoreIcon icon="ri:brush-line" :size="14" />
          修改
        </a-button>
        <a-popconfirm title="确认删除？" placement="bottom" @confirm="dbTableFieldDelete" v-if="dbTableFieldListSelectLength > 0">
          <a-button type="dashed" danger>
            <CoreIcon icon="jam:delete" :size="14" />
            删除
          </a-button>
        </a-popconfirm>
        <a-button @click="dbTableFieldDetailInfo" v-if="dbTableFieldListSelectLength === 1">
          <CoreIcon icon="heroicons-outline:light-bulb" :size="14" />
          详情
        </a-button>
      </a-space>
      <a-space :style="{ ...coreStyle.floatRight }">
        <a-button type="link" shape="circle" @click="dbTableFieldListGetDataSet">
          <CoreIcon icon="ci:refresh" :size="22" />
        </a-button>
      </a-space>
      <a-table
        rowKey="id"
        :columns="dbTableFieldListColumns"
        :data-source="dbTableFieldListDataSet"
        :loading="dbTableFieldListLoading"
        :pagination="false"
        bordered
        :customRow="dbTableFieldListCustomRow"
        :row-selection="{ fixed: true, selectedRowKeys: dbTableFieldListSelectedRowKeys, onChange: dbTableFieldListRowOnChange }"
        :scroll="{ x: '100%', y: 550 }"
        :style="{ ...coreStyle.marginTop(10) }"
      >
      </a-table>
      <a-pagination
        v-model:current="dbTableFieldListDataPage"
        v-model:pageSize="dbTableFieldListDataRows"
        :total="dbTableFieldListDataCount"
        show-size-changer
        show-quick-jumper
        :page-size-options="[ ...coreStyle.antdPaginationPageSizeOptions ]"
        :show-total="(total, range) => coreStyle.antdPaginationShowTotal(total, range)"
        :style="{ ...coreStyle.marginTop(10), ...coreStyle.textAlignCenter }"
        @change="dbTableFieldListPaginationChange"
        @showSizeChange="dbTableFieldListPaginationShowSizeChange"
        v-if="dbTableFieldListPaginationVisible"
      >
      </a-pagination>
      <p :style="{ ...coreStyle.marginTop(14), ...coreStyle.marginBottom(6), ...coreStyle.textAlignCenter }" v-if="!dbTableFieldListPaginationVisible">
        {{ coreStyle.antdPaginationShowTotal(dbTableFieldListDataCount) }}
      </p>
    </a-card>
    <a-drawer
      v-model:visible="dbTableFieldEditDrawerVisible"
      title="编辑数据库表字段信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
      @close="dbTableFieldEditDrawerOnClose"
    >
      <a-form ref="dbTableFieldFormRef" :model="dbTableFieldFormModel" :rules="dbTableFieldFormRules" labelAlign="left" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="字段名称" name="fieldName">
              <a-input v-model:value="dbTableFieldFormModel.fieldName" placeholder="输入字段名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="数据类型" name="dataType">
              <a-input v-model:value="dbTableFieldFormModel.dataType" placeholder="输入数据类型" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="是否为空" name="isempty">
              <a-input v-model:value="dbTableFieldFormModel.isempty" placeholder="输入是否为空" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="排序权重" name="weightOrder">
              <a-input-number v-model:value="dbTableFieldFormModel.weightOrder" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="外键Id" name="fkid">
              <a-input v-model:value="dbTableFieldFormModel.fkid" placeholder="输入外键Id" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button @click="dbTableFieldFormReset">
            <CoreIcon icon="ant-design:clear-outlined" :size="14" />
            重置
          </a-button>
          <a-button type="primary" ghost :loading="dbTableFieldFormSaveSubmitting" @click="dbTableFieldFormNextAdd">
            <CoreIcon icon="tabler:player-track-next" :size="14" />
            继续录入
          </a-button>
          <a-button type="primary" ghost :loading="dbTableFieldFormSaveSubmitting" @click="dbTableFieldFormSave">
            <CoreIcon icon="ant-design:save-outlined" :size="14" />
            保存
          </a-button>
        </a-space>
      </div>
    </a-drawer>
    <a-drawer
      v-model:visible="dbTableFieldDetailDrawerVisible"
      title="数据库表字段详细信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
    >
      <a-space direction="vertical" :size="20" :style="{ ...coreStyle.width('100%') }">
        <a-descriptions title="基础信息" :column="2" bordered>
          <a-descriptions-item label="字段名称" :span="1">{{ dbTableFieldDetailModel.fieldName }}</a-descriptions-item>
          <a-descriptions-item label="数据类型" :span="1">{{ dbTableFieldDetailModel.dataType }}</a-descriptions-item>
          <a-descriptions-item label="是否为空" :span="1">{{ dbTableFieldDetailModel.isempty }}</a-descriptions-item>
          <a-descriptions-item label="排序权重" :span="1">{{ dbTableFieldDetailModel.weightOrder }}</a-descriptions-item>
          <a-descriptions-item label="外键Id" :span="1">{{ dbTableFieldDetailModel.fkid }}</a-descriptions-item>
        </a-descriptions>
      </a-space>
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button type="dashed" @click="dbTableFieldDetailUpdate">
            <CoreIcon icon="ri:brush-line" :size="14" />
            修改
          </a-button>
        </a-space>
      </div>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { mapStores } from 'pinia'
import { useCoreToolStore } from '/@/store/modules/cn/core/tool/coreToolStore'
import type { Res } from '/@/tool/Res'
import type { Param } from '/@/tool/Param'

import { useDbTableFieldStore } from '/@/store/modules/cn/core/data/dbTableFieldStore'

import type { DbTableField } from '/@/model/cn/core/data/eo/DbTableField'
import { toDbTableField } from '/@/model/cn/core/data/eo/DbTableField'

import type { DbTableFieldQO } from '/@/model/cn/core/data/qo/DbTableFieldQO'
import { toDbTableFieldQO } from '/@/model/cn/core/data/qo/DbTableFieldQO'

import type { DbTableFieldVO } from '/@/model/cn/core/data/vo/DbTableFieldVO'
import { toDbTableFieldVO } from '/@/model/cn/core/data/vo/DbTableFieldVO'

@Options({
  name: 'DbTableField',
  components: {
  },
  computed: {
    ...mapStores(useCoreToolStore, useDbTableFieldStore),
  },
})
export default class DbTableField extends Vue {

  dbTableFieldListDataSet: Array<DbTableFieldVO> = []

  dbTableFieldListColumns: Array<object> = [
    {
      title: '字段名称',
      dataIndex: 'fieldName',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '数据类型',
      dataIndex: 'dataType',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '是否为空',
      dataIndex: 'isempty',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '排序权重',
      dataIndex: 'weightOrder',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '外键Id',
      dataIndex: 'fkid',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
  ]

  dbTableFieldListLoading: boolean = false

  dbTableFieldListSelectedRowKeys: string[] = []

  dbTableFieldListSelectData: Array<DbTableFieldVO> = []

  dbTableFieldListSelectLength: number = 0

  dbTableFieldListSelectCurrentRowIndex: number = -1

  dbTableFieldListSelectCurrentRowData: DbTableFieldVO = toDbTableFieldVO()

  dbTableFieldListPaginationVisible: boolean = true

  dbTableFieldListDataPage: number = 1

  dbTableFieldListDataRows: number = 10

  dbTableFieldListDataCount: number = 0

  dbTableFieldListRowOnChange(selectedRowKeys, selectedRows) {
    this.dbTableFieldListSelectedRowKeys = [ ...selectedRowKeys ]
    this.dbTableFieldListSelectData = [ ...selectedRows ]
    this.dbTableFieldListSelectLength = selectedRows.length
  }

  dbTableFieldListCustomRow(record, index) {
    return {
      'class': index === this.dbTableFieldListSelectCurrentRowIndex ? 'ant-table-row-selected' : '',
      onClick: (event) => {
        this.dbTableFieldListSelectCurrentRowIndex = index
        this.dbTableFieldListSelectCurrentRowData = { ...record }
        let selectedRowKeys = [ ...this.dbTableFieldListSelectedRowKeys ]
        let selectedRows = [ ...this.dbTableFieldListSelectData ]
        if (selectedRowKeys.includes(record.id)) {
          this.dbTableFieldListRowOnChange([ ...selectedRowKeys.filter(eo => { return eo !== record.id }) ], [ ...selectedRows.filter(eo => { return eo.id !== record.id }) ])
        } else {
          selectedRowKeys.push(record.id)
          selectedRows.push(record)
          this.dbTableFieldListRowOnChange([ ...new Set(selectedRowKeys) ], [ ...new Set(selectedRows) ])
        }
      },
      onDblclick: (event) => {
        this.dbTableFieldStore.pkVo(this.$toParam<DbTableFieldQO>({ id: this.dbTableFieldListSelectCurrentRowData.id } as DbTableFieldQO)).then((res: Res<DbTableFieldVO>) => {
          if (res.succ) {
            this.dbTableFieldDetailModel = { ...res.data[0] }
            this.dbTableFieldDetailDrawerVisible = true
          } else {
            this.$message.error(res.msg, 6)
          }
        })
      },
    }
  }

  dbTableFieldListGetDataSet() {
    this.dbTableFieldListLoading = true
    this.dbTableFieldListRowOnChange([], [])
    this.dbTableFieldListSelectCurrentRowIndex = -1
    this.dbTableFieldListSelectCurrentRowData = toDbTableFieldVO()
    this.dbTableFieldStore.pagingVo(this.$toParam<DbTableFieldQO>([], this.dbTableFieldListDataPage, this.dbTableFieldListDataRows)).then((res: Res<DbTableFieldVO>) => {
      if (res.succ) {
        this.dbTableFieldListPaginationVisible = true
        this.dbTableFieldListDataSet = [ ...res.data ]
        this.dbTableFieldListDataCount = res.count
        setTimeout(() => { this.dbTableFieldListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.dbTableFieldListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.dbTableFieldListLoading = false }, 500)
    })
  }

  dbTableFieldListPaginationChange() {
    this.dbTableFieldListGetDataSet()
  }

  dbTableFieldListPaginationShowSizeChange() {
    this.dbTableFieldListGetDataSet()
  }

  dbTableFieldFormQueryVisible: boolean = false

  dbTableFieldFormQuerySubmitting: boolean = false

  dbTableFieldFormQueryModel: DbTableFieldQO = toDbTableFieldQO()

  dbTableFieldFormQueryUpDown() {
    this.dbTableFieldFormQueryVisible = !this.dbTableFieldFormQueryVisible
  }

  dbTableFieldFormQueryReset() {
    if (this.$refs.dbTableFieldFormQueryRef) {
      this.$refs.dbTableFieldFormQueryRef.resetFields()
      this.dbTableFieldFormQueryModel = toDbTableFieldQO()
    }
  }

  dbTableFieldFormQuerySearch() {
    this.dbTableFieldFormQuerySubmitting = true
    this.dbTableFieldListLoading = true
    this.dbTableFieldListRowOnChange([], [])
    this.dbTableFieldListSelectCurrentRowIndex = -1
    this.dbTableFieldListSelectCurrentRowData = toDbTableFieldVO()
    this.dbTableFieldStore.queryVo(this.$toParam<DbTableFieldQO>(this.$toSearch({ ...this.dbTableFieldFormQueryModel }))).then((res: Res<DbTableFieldVO>) => {
      if (res.succ) {
        this.dbTableFieldListPaginationVisible = false
        this.dbTableFieldListDataSet = [ ...res.data ]
        this.dbTableFieldListDataCount = res.count
        setTimeout(() => { this.dbTableFieldFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.dbTableFieldListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.dbTableFieldFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.dbTableFieldListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.dbTableFieldFormQuerySubmitting = false }, 5000)
      setTimeout(() => { this.dbTableFieldListLoading = false }, 500)
    })
  }

  dbTableFieldEditDrawerVisible: boolean = false

  dbTableFieldFormSaveSubmitting: boolean = false

  dbTableFieldFormSaveContinue: boolean = false

  dbTableFieldFormModel: DbTableField = toDbTableField()

  dbTableFieldFormRules: object = {
    // fieldName: [
    //   { type: 'string', required: true, message: '字段名称不能为空！', trigger: ['change', 'blur'] },
    // ],
    // dataType: [
    //   { type: 'string', required: true, message: '数据类型不能为空！', trigger: ['change', 'blur'] },
    // ],
    // isempty: [
    //   { type: 'string', required: true, message: '是否为空不能为空！', trigger: ['change', 'blur'] },
    // ],
    // weightOrder: [
    //   { type: 'number', required: true, message: '排序权重不能为空！', trigger: ['change', 'blur'] },
    // ],
    // fkid: [
    //   { type: 'string', required: true, message: '外键Id不能为空！', trigger: ['change', 'blur'] },
    // ],
  }

  dbTableFieldFormReset() {
    if (this.$refs.dbTableFieldFormRef) {
      this.$refs.dbTableFieldFormRef.resetFields()
      this.dbTableFieldFormModel = toDbTableField()
    }
  }

  dbTableFieldFormSubmit() {
    this.dbTableFieldFormSaveSubmitting = true
    this.$refs.dbTableFieldFormRef.validate().then(() => {
      if (this.dbTableFieldFormModel.id) {
        this.dbTableFieldStore.update(this.$toParam<DbTableField>(this.dbTableFieldFormModel)).then((res: Res<DbTableField>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.dbTableFieldFormReset()
            this.dbTableFieldFormSaveSubmitting = false
            if (!this.dbTableFieldFormSaveContinue) {
              this.dbTableFieldEditDrawerVisible = false
              this.dbTableFieldListGetDataSet()
            }
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.dbTableFieldFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.dbTableFieldFormSaveSubmitting = false }, 3000)
        })
      } else {
        this.dbTableFieldStore.save(this.$toParam<DbTableField>(this.dbTableFieldFormModel)).then((res: Res<DbTableField>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.dbTableFieldFormReset()
            this.dbTableFieldFormSaveSubmitting = false
            if (!this.dbTableFieldFormSaveContinue) {
              this.dbTableFieldEditDrawerVisible = false
              this.dbTableFieldListGetDataSet()
            }
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.dbTableFieldFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.dbTableFieldFormSaveSubmitting = false }, 3000)
        })
      }
    }).catch(() => {
      setTimeout(() => { this.dbTableFieldFormSaveSubmitting = false }, 3000)
    })
  }

  dbTableFieldFormSave() {
    this.dbTableFieldFormSaveContinue = false
    this.dbTableFieldFormSubmit()
  }

  dbTableFieldFormNextAdd() {
    this.dbTableFieldFormSaveContinue = true
    this.dbTableFieldFormSubmit()
  }

  dbTableFieldAdd() {
    if (this.dbTableFieldFormModel.id) {
      this.dbTableFieldFormReset()
    }
    this.dbTableFieldEditDrawerVisible = true
  }

  dbTableFieldUpdate() {
    this.dbTableFieldStore.pk(this.$toParam<DbTableFieldQO>({ id: this.dbTableFieldListSelectData[0].id } as DbTableFieldQO)).then((res: Res<DbTableField>) => {
      if (res.succ) {
        this.dbTableFieldFormReset()
        this.dbTableFieldFormModel = { ...res.data[0] }
        this.dbTableFieldEditDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  dbTableFieldEditDrawerOnClose() {
    if (this.dbTableFieldFormSaveContinue) {
      this.dbTableFieldFormSaveContinue = false
      this.dbTableFieldListGetDataSet()
    }
  }

  dbTableFieldDelete() {
    let param: Array<DbTableField> = []
    this.dbTableFieldListSelectData.forEach((eo: DbTableFieldVO) => {
      param.push({ id: eo.id } as DbTableField)
    })
    this.dbTableFieldStore.removeBatch(this.$toParam<DbTableField>(param)).then((res: Res<DbTableField>) => {
      if (res.succ) {
        this.$message.success(res.msg, 3)
        this.dbTableFieldListGetDataSet()
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  dbTableFieldDetailDrawerVisible: boolean = false

  dbTableFieldDetailModel: DbTableFieldVO = toDbTableFieldVO()

  dbTableFieldDetailInfo() {
    this.dbTableFieldStore.pkVo(this.$toParam<DbTableFieldQO>({ id: this.dbTableFieldListSelectData[0].id } as DbTableFieldQO)).then((res: Res<DbTableFieldVO>) => {
      if (res.succ) {
        this.dbTableFieldDetailModel = { ...res.data[0] }
        this.dbTableFieldDetailDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  dbTableFieldDetailUpdate() {
    this.dbTableFieldStore.pk(this.$toParam<DbTableFieldQO>({ id: this.dbTableFieldDetailModel.id } as DbTableFieldQO)).then((res: Res<DbTableField>) => {
      if (res.succ) {
        this.dbTableFieldFormReset()
        this.dbTableFieldFormModel = { ...res.data[0] }
        this.dbTableFieldDetailDrawerVisible = false
        this.dbTableFieldEditDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  mounted() {
    this.dbTableFieldListGetDataSet()
  }

}
</script>

<style scoped lang="less">

</style>
